<template>
  <div class="vipopen">
    <div class="bg"><img src="../assets/image/vopbg.png" alt="" /></div>
    <div class="main">
      <p class="title">套餐开通</p>
      <div class="card">
        <div
          class="yearCard monthCard"
          v-for="(item, index) in arr"
          :key="index"
          @click="check(item, index)"
          :class="index == activeName ? 'activeStyle' : ''"
        >
          <div v-if="item.card == '年卡'" class="head">推荐开通</div>
          <p class="cardStyle">{{ item.card }}</p>
          <p>
            ￥<span class="price">{{ item.price }}</span>
          </p>
          <p class="active">
            <span class="dele">{{ item.dele }}</span
            ><span>立省{{ item.dele1 }}元</span>
          </p>
        </div>
      </div>
      <div class="btn" @click="submit">立即开通</div>
      <p class="title">会员特权</p>
      <ul class="msg">
        <li>
          <div class="msgPic">
            <img src="../assets/image/组 16@2x.png" alt="" />
          </div>
          <div class="content">
            <p>通话半价</p>
            <p class="lastChild">尊享通话优惠，畅聊更嗨皮</p>
          </div>
        </li>
        <li>
          <div class="msgPic">
            <img src="../assets/image/组 16@2x(1).png" alt="" />
          </div>
          <div class="content">
            <p>条件筛选</p>
            <p class="lastChild">选择偏好类型，匹配更精准</p>
          </div>
        </li>
        <li>
          <div class="msgPic">
            <img src="../assets/image/组 16@2x(2).png" alt="" />
          </div>
          <div class="content">
            <p>优先匹配</p>
            <p class="lastChild">时刻保持前排，抢人更快速</p>
          </div>
        </li>
        <li>
          <div class="msgPic">
            <img src="../assets/image/组 16@2x(3).png" alt="" />
          </div>
          <div class="content">
            <p>星标功能</p>
            <p class="lastChild">标记心仪对象，动态尽掌握</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { openVip_api, userUserinfo } from "@/api/reply.js";
export default {
  data() {
    return {
      arr: [
        { card: "年卡", price: "30", dele: "￥54", dele1: "24" },
        { card: "季卡", price: "30", dele: "￥54", dele1: "24" },
        { card: "月卡", price: "80", dele: "￥54", dele1: "24" },
      ],
      isshow: false,
      activeName: "0",
    };
  },
  created() {
    this.getMsg();
  },
  methods: {
    check(item, index) {
      //   console.log(item, index);
      this.activeName = index;
    },
    async getMsg() {
      localStorage.setItem(
        "access_token",
        "Bfo9flop4VNJ_HNPFTbbA_S-LspOt9U2FoSOE5C5ruE.6TmtdixRzL4ukjMON0cY0vDnxSpM7_RAzinNEqhwkbe9K4ZCogVEAk8P5u6MW0bxnjhJ7w8urvM6waQEcJUw344iziZHEDnQOXx_hQIlY81DxOcGDAnDT2UoL_5R-6ApEWyShlzFyb-qRUhI5pw_eBd2uSXItWpwUqrG375eKP6COsDmESTnQALj5R9Ths6UewUFQ1ArkV9ZGlntvc2pQA.4pSONHTC23gCaMvecb98lDw6smDOYQVOlD41p9k51ocjp7l-k1r3YWSXEuzyvAch"
      );
      let { code, data } = await userUserinfo({});
      if (code == 0) {
        console.log(data);
      }
    },
    // 开通
    async submit() {
      //   localStorage.setItem(
      //     "access_token",
      //     "Bfo9flop4VNJ_HNPFTbbA_S-LspOt9U2FoSOE5C5ruE.6TmtdixRzL4ukjMON0cY0vDnxSpM7_RAzinNEqhwkbfYA4nV5KoPgAn8PxdA1V5CkFmHyT4Y-WlFbk0XqL0AjsHZZYAO79osmp_9JtdJ6J8THaDVHShy4sRICWqQWe6boI2RYPnUMT6RPKUjuA40yGOT5UNmIYXYufF0351y_E4seIbkN0DCW7MQ1Vu7xLgCr-wnC1o0g9hscGMgWUZYig.2DG0urVw01TzrbZIaW7eSut28gBqztAGtbuj_li7VsAHDLW_0Q9RbQs9U_53fADQ"
      //   );
      //   let { code, data } = await openVip_api({
      //     type: 2,
      //   });
      //   if (code == 0) {
      //     console.log(data);
      //   }
    },
  },
};
</script>

<style lang="less" scoped>
.vipopen {
  width: 100%;
  background: linear-gradient(0deg, #24263c 0%, #24263c 100%);
  padding: 30px 0;

  .bg {
    img {
      width: 100%;
      padding-top: 50px;
      box-sizing: border-box;
    }
  }
  .main {
    width: 90%;
    margin: 30px auto;
    .title {
      font-size: 46px;
      font-weight: bold;
      color: #e5cbb3;
      margin: 10px;
    }
    .card {
      margin: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        width: 31%;
        height: 320px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        background: linear-gradient(0deg, #2e2f41 0%, #464b5e 100%);
        border-radius: 28px;
        color: #eecea7;
        .cardStyle {
          font-size: 40px;
          font-weight: bold;
        }
        .price {
          font-size: 66px;
          font-weight: 400;
        }
        .active {
          display: flex;
          flex-direction: column;
          align-items: center;
          .dele {
            text-decoration: line-through;
            color: #a6a6a7;
          }
        }
      }
      .activeStyle {
        color: #483123;
        border-image: linear-gradient(0deg, #bf9676, #be9676) 10 10;
        background: linear-gradient(0deg, #efcfa9 0%, #fbe7cf 100%);
        border: 7px solid #bf9676;
        box-sizing: border-box;
      }
      .yearCard {
        position: relative;
        .head {
          width: 65%;
          height: 50px;
          line-height: 50px;
          color: #fff;
          font-weight: 400;
          position: absolute;
          top: -35px;
          left: -2px;
          background: #be9676;
          border-radius: 7px;
          text-align: center;
        }
      }
    }

    .btn {
      margin: 30px 0;
      width: 100%;
      height: 90px;
      line-height: 90px;
      background: linear-gradient(90deg, #eec28d 0%, #fae8d0 100%);
      border-radius: 45px;
      text-align: center;
      font-size: 33px;
      font-weight: 500;
      color: #483122;
    }
    .msg {
      margin-bottom: 40px;
      li {
        list-style: none;
        display: flex;
        margin: 20px 0;
        .msgPic {
          width: 90px;
          height: 90px;
          border: 1px dashed #483122;
          margin-right: 80px;
          margin-left: 20px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .content {
          font-weight: 400;
          color: #e5cbb3;
          font-size: 36px;
          .lastChild {
            font-size: 24px;
          }
        }
      }
    }
  }
}
</style>